<template>
  <div class="Main-container">
    <!--主体容器-->
    <div class="contains" style="padding-bottom: 10px">
      <!--筛选条件-->
      <div class="search-condition clearfix">
        <!--副导航栏-->
        <div class="sub-nav clearfix">
          <router-link :to="{ path: '/qys' }">
            <el-button :id="this.$route.path === '/qys' ? 'active' : ''">全要素</el-button>
          </router-link>
          <router-link :to="{ path: '/zc' }">
            <el-button :id="this.$route.path === '/zc' ? 'active' : ''">总场</el-button>
          </router-link>
          <router-link :to="{ path: '/pj' }">
            <el-button :id="this.$route.path === '/pj' ? 'active' : ''">偏角</el-button>
          </router-link>
          <router-link :to="{ path: '/qj' }">
            <el-button :id="this.$route.path === '/qj' ? 'active' : ''">倾角</el-button>
          </router-link>
          <router-link :to="{ path: '/xfl' }">
            <el-button :id="this.$route.path === '/xfl' ? 'active' : ''">X分量</el-button>
          </router-link>
          <router-link :to="{ path: '/yfl' }">
            <el-button :id="this.$route.path === '/yfl' ? 'active' : ''">Y分量</el-button>
          </router-link>
          <router-link :to="{ path: '/zfl' }">
            <el-button :id="this.$route.path === '/zfl' ? 'active' : ''">Z分量</el-button>
          </router-link>

          <!-- 当前仪器标识及状态 -->
          <!-- <el-button class="current-instrument">丽江2号</el-button>
          <el-button class="current-instrument">丽江1号</el-button> -->
        </div>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonMain',

  data() {
    return {
      currentIns: '丽江1号'
    }
  },
  methods: {
    // changeColor() {
    //   // console.log(this)
    //   let btns = document.getElementsByClassName('btn')
    //   console.log(btns)
    //   for (let i = 0; i < btns.length; i++) {
    //     btns[i].style.color = 'black'
    //     btns[i].style.backgroundColor = ''
    //   }
    //   let buttonActive = document.querySelectorAll('#active')
    //   console.log(buttonActive)
    //   buttonActive[0].style.backgroundColor = '#1072bd'
    //   buttonActive[0].style.color = 'white'
    //   // this.$refs.button.$el.style.backgroundColor = '#1072bd'
    //   // this.$refs.button.$el.style.color = 'white'
    // }
  }
}
</script>

<style></style>
